<header>
    Title 标题头
</header>
<div class="version">
    0.3.0 新增
</div>
<table class="support">
    <thead>
        <tr>
            <td>

            </td>
            <td>
                H5
            </td>
            <td>
                微信公众号
            </td>
            <td>
                微信小程序
            </td>
            <td>
                支付宝小程序
            </td>
            <td>
                抖音小程序
            </td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                是否支持？
            </td>
            <td>
                ✔
            </td>
            <td>
                ✘
            </td>
            <td>
                ✔
            </td>
            <td>
                ✘
            </td>
            <td>
                ✔ 1.0.0 新增
            </td>
        </tr>
    </tbody>
</table>
<h2>
    使用
</h2>
<pre tag="html">
    <ui-title title="标题" backicon="/static/images/backBlack.png"></ui-title>
</pre>
<p>
    如果你在用此组件作为标题头的时候，底部希望用
    <span class="special">
        scroll-view
    </span>
    实现局部滚动，可滚动高度如何计算？可以这样：
</p>
<pre tag="html">
<ui-title ref="mytitleRef" title="标题" backicon="/static/images/backBlack.png"></ui-title>
<scroll-view scroll-y="true" :style="{ height: scrollHeight + 'px' }"></scroll-view>
</pre>
<p>
    然后直接获取剩余高度：
</p>
<pre tag="javascript">
scrollHeight.value = mytitleRef.value.getHeight();
</pre>
<h2>
    配置项
</h2>
<h3>
    Title Attributes
</h3>
<table>
    <thead>
        <tr>
            <td>
                属性
            </td>
            <td>
                说明
            </td>
            <td>
                类型
            </td>
            <td>
                是否必输？
            </td>
            <td>
                默认值
            </td>
            <td>
                备注
            </td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                title
            </td>
            <td>
                标题内容
            </td>
            <td>
                string
            </td>
            <td>
                否
            </td>
            <td>
                ""
            </td>
            <td>

            </td>
        </tr>
        <tr>
            <td>
                fixed
            </td>
            <td>
                是否固定标题头
            </td>
            <td>
                boolean
            </td>
            <td>
                否
            </td>
            <td>
                true
            </td>
            <td>
                如果设置为false，页面内容过多的时候，标题头就会一起上下滚动
            </td>
        </tr>
        <tr>
            <td>
                backicon
            </td>
            <td>
                返回按钮图片
            </td>
            <td>
                string
            </td>
            <td>
                是
            </td>
            <td>

            </td>
            <td>

            </td>
        </tr>
    </tbody>
</table>
<h2>
    隐藏原生标题头
</h2>
<p>
    最后，别忘了隐藏原生标题头。直接在
    <span class="special">pages.json文件</span>
    的全局配置属性
    <span class="special">globalStyle</span>
    或页面的当前页配置属性
    <span class="special">style</span>
    中添加如下配置即可：
</p>
<pre tag="javascript">
{
    "navigationStyle": "custom"
}
</pre>
